<template>
    <TodoListItem 
        v-for="item in todoLists" 
        :key="item.id" 
        :item="item"
        @removeTodo="removeTodo"
        @setStatus="setStatus"
        @setDoing="setDoing"
    ></TodoListItem>
</template>

<script lang="ts">
import { defineComponent, PropType, onMounted } from 'vue';
import TodoListItem from './item.vue'
import { ITodo } from '@/typeings';
import { IUseTodo, useTodo } from '../../hooks/TodoInput'


export default defineComponent({
    name: 'TODOLIST',
    props: {
        todoLists : Array as PropType<ITodo[]>
    },
    components:{
        TodoListItem
    },
    setup () {
        const { removeTodo , setStatus , setDoing } : IUseTodo = useTodo()

        return {
            removeTodo,
            setStatus,
            setDoing 
        }
    }
});
</script>

<style  scoped>
</style>